<template>
	<view class="zone">
		<Header title=" " color="#fff"></Header>
		<image class="title" src="http://img.cpgm.cc/panda/static/forest/title.png" mode="widthFix" />
		<view class="main">
			<scroll-view scroll-x  class="scrollbox">
				<view class="lists">
					<view class="item" v-for="(item , index) in list" :key="index" @click="change(item)">
						<view class="box" :class="[item.choose == stat ? 'active':'dd']">
							<image v-if="item.img" :src="`${imgurl}${item.img}`" mode="widthFix" />
						</view>
						<text :class="[item.id == stat ? 'active2':'']">{{item.name}}</text>
					</view>
				</view>
			</scroll-view>

			<view class="bottom">
				<image class="bg" src="http://img.cpgm.cc/panda/static/forest/hcbg.png" mode="widthFix" />
				<view class="posabox">
					<view class="header">
						<image v-if="list[stat-1].img" :src="`${imgurl}${list[stat-1].img}`" mode="widthFix" />
					</view>
					<view class="explain">
						<h3>合成熊猫法师</h3>
						<p>合成需要：{{list[stat-1].name2}} * <text>{{list[stat-1].need1}} </text> + 进阶石 * <text>{{list[stat-1].need2}}</text> </p>
					</view>
					<view class="hcbox">
						<view class="item2">
							<view class="box2">
								<image :src="`http://img.cpgm.cc/panda/static/kit/${list[stat-1].img2}`" mode="widthFix" />
							</view>
							<p>{{list[stat-1].name2}}( <text>{{list[stat-1].num}}/{{list[stat-1].need1}}</text> )</p>
						</view>
						<text class="add">+</text>
						<view class="item2">
							<view class="box2">
								<image src="http://img.cpgm.cc/panda/static/daoju/stone1.png" mode="widthFix" />
							</view>
							<p>进阶石( <text>{{stone}}/{{list[stat-1].need2}}</text> )</p>
						</view>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="compose(list[stat-1])">立即合成</u-button>
				</view>
			</view>
		</view>


		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<image v-if="result.img" :src="`${imgurl}${result.img}`" mode="widthFix" />
					<h3>激活成功</h3>
					<p>每日可领{{result.can}}银元</p>
					<view class="button" @click="show = false">确认</view>
				</view>
				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/feed/cha2.png" mode="widthFix" />
			</view>
		</u-mask>

	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				list:[
					{
						img2:'10.png',
						name:'熊猫法师',
						name2:'熊猫忍者',
						need1:30,
						need2:30,
						choose:1,
						can:1,
					},
					{
						img2:'11.png',
						name:'熊猫驯鹿',
						name2:'熊猫法师',
						need1:3,
						need2:90,
						choose:2,
						can:3,
					},
					{
						img2:'12.png',
						name:'熊猫战士',
						name2:'熊猫驯鹿',
						need1:3,
						need2:270,
						choose:3,
						can:9,
					},
					{
						img2:'13.png',
						name:'熊猫潮人',
						name2:'熊猫战士',
						need1:3,
						need2:810,
						choose:4,
						can:27,
					},
					{
						img2:'14.png',
						name:'熊猫死神',
						name2:'熊猫潮人',
						need1:3,
						need2:2400,
						choose:5,
						can:81,
					},
					{
						img2:'15.png',
						name:'熊猫福星',
						name2:'熊猫死神',
						need1:3,
						need2:7200,
						choose:6,
						can:243,
					},
					{
						img2:'16.png',
						name:'熊猫财神',
						name2:'熊猫福星',
						need1:3,
						need2:21600,
						choose:7,
						can:729,
					},

				],
				stat:1,
				stone:0,
				show:false,
				result:'',
			};
		},
		onLoad(){
			this.composeList();
		},
		methods: {
			change(item){
				this.stat = item.choose
			},
			// 获取熊猫列表
			async composeList(){
				let res = await this.$http.index.composeList();
				this.stone = res.stone
				this.list = res.data.map((item,index)=>{
					return {
						...this.list[index] , 
						...item
					}
				})
				// console.log(this.list);
			},

			// 合成
			async compose(item){
				let res = await this.$http.index.compose({
					id:item.id
				})
				
				if(res.code == 1) {
					this.composeList();
					this.result = item;
					this.show = true
				}else {
					this.$u.toast(res.msg);
				}
			},
		
		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #0477FD 0%, #F5FEA8 80%);
	min-height: 100vh;
}

.main {
	
}

.title {
	position: fixed;
	width: 34%;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 150px;
}


.scrollbox {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.lists {
	width: 100%;
	display: flex;
	align-items: center;
}

.item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 10px;

	.box {
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
		width: 72px;
		height: 72px;
		image {
			width: 100%;
		}
	}

	.dd {
		position: relative;
	}
	.dd::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
	}
	text {
		color: rgba(255,255,255,0.8);
	}
	.active {
		color: #fff;
	}

	.active {
		color: #fff;
		background: #FFFFFF linear-gradient(180deg, #0477FD 0%, #77FDCD 100%);
		border-radius: 4px;
		border: 3px solid #fff;
	}
}

.bottom {
	position: relative;
	width: 100%;
	line-height: 0;
	margin-top: 15%;

	.bg {
		width: 100%;
	}

	.posabox {
		padding: 25px;
		position: absolute;
		top: -10%;
		width: 100%;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.button {
			width: 80%;
			height: 60px;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			color: #B73800;
			font-size: 20px;
			margin-top: 10%;
			font-weight: 600;
		}
	}
	.header {
		width: 35%;
		background: #FFFFFF linear-gradient(180deg, #0477FD 0%, #77FDCD 100%);
		border-radius: 10px;
		border: 3px solid #fff;

		image {
			width: 100%;
		}
	}

	.explain {
		margin-top: 20px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		h3 {
			font-size: 20px;
			font-weight: 600;
			position: relative;
			z-index: 10;
			text-align: center;
			line-height: 30px;
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 90% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		P {
			margin-top: 10px;
			font-size: 13px;
			line-height: 14px;

			text {
				font-weight: 600;
			}
		}
	}
}	

.hcbox {
	width: 100%;
	background: #FFFFFF linear-gradient(180deg, #0477FD 0%, #77FDCD 100%);
	border-radius: 4px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;

	.add {
		font-size: 50px;
		color: #fff;
		margin-top: -10%;
	}

	.item2 {
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.box2 {
			background: linear-gradient(180deg, #D6D3D9 0%, #F4F4F4 100%), linear-gradient(180deg, #C8C8C8 0%, #FFFFFF 100%);
			border-radius: 4px;
			width: 60px;
			height: 60px;
			image {
				width: 100%;
			}
		}
		p {
			line-height: 14px;
			font-size: 12px;
			margin-top: 8px;

			text {
				font-weight: 600;
			}
		}

		.active {
			background: #FFFFFF linear-gradient(180deg, #0477FD 0%, #77FDCD 100%);
			border-radius: 4px;
			border: 3px solid #fff;
		}
	}
}





// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	image {
		width: 40%;
		margin-top: -25%;
	}

	h3 {
		margin-top: -10px;
		font-size: 24px;
		position: relative;
		z-index: 10;
	}

	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	p {
		color: #000000;
		font-size: 16px;
		font-weight: 600;
		margin: 30px 0;
	}

	.button {
		width: 70%;
		height: 55px;
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		color: #B73800;
		font-size: 18px;
		font-weight: 600;
	}
}

.closed {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 35px;
	margin: 0 auto;
	margin-top: 40px;
}


</style>
